<template>
  <a-row style="background-color:#fff; min-height: 300px;padding-top: 40px; padding-left: 50px">
    <a-col :span="4">
      <a-tree
          class="draggable-tree"
          block-node
          defaultExpandAll="true"
          v-model:selectedKeys="selectedKeys"
          :fieldNames="{children:'children', title:'name', key:'id' }"
          :tree-data="docs"
          v-if="docs.length > 0"
          @select="getContent"
      />
      <div v-if="docs.length <= 0">
         暂无文档
      </div>
    </a-col>
    <a-col :span="18" :offset="1">
      <h2>{{ doc.name}}</h2>
      <span key="EyeOutlined">
        <component is="EyeOutlined" style="margin-right: 8px" />
        {{ doc.viewCount }}
      </span>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span key="LikeOutlined">
        <component is="LikeOutlined" style="margin-right: 8px" />
        {{ doc.voteCount }}
      </span>
      <a-divider style="height: 2px; background-color: #7cb305" />
      <div v-if="docs.length <= 0">
        暂无内容
      </div>
      <div v-if="docs.length > 0" v-html="content">

      </div>
      <a-button type="primary" shape="round" size="default" @click="incrementVote">
        <template #icon>
          <like-outlined />
        </template>
        点赞
      </a-button>
    </a-col>
  </a-row>
</template>

<script>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";
import {EyeOutlined, LikeOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";

export default {
  name: "ebook",
  components: {
    LikeOutlined,
    EyeOutlined
  },
  setup(){
    const docs = ref([]);
    const route = useRoute();
    const ebookId = route.params.id; // 对应 电子书编号
    const selectedKeys = ref([]);
    const content = ref('');


    const doc = ref({});

    // 获取文档列表
    const getData = () => {
      axios.get("/doc/all", {params: {ebookId}}).then((res) => {
        let data = res.data;
        if (data.code == 200){

          docs.value = data.data;

          if (docs.value != null){
            selectedKeys.value = [docs.value[0].id];
            doc.value = docs.value[0];
            getContent();
          }
        }
      })
    };

    // 获取文档内容
    const getContent = (i, node) =>{
      const id = selectedKeys.value[0];

      if (node){
        doc.value = node.node.dataRef;
      }

      if (id){
        axios.get("/content/" + id).then( (res) => {
            const data = res.data;
            if (data.code == 200){
              if (data.data){
                doc.value.viewCount ++;
                content.value = data.data.content;
              }
            }
        });
      }
    }

    // 点赞
    const incrementVote = () => {
      const id = selectedKeys.value[0];

      if (id){
        axios.get("/doc/vote/" + id).then( (res) => {
          const data = res.data;
          if (data.code == 200){
            doc.value.voteCount ++;
            message.success("点赞成功");
          } else {
            message.error(data.message);
          }
        });
      }
    }

    onMounted(function(){
      getData();
    });

    return{
      docs,
      selectedKeys,
      content,
      getContent,
      incrementVote,
      doc
    }
  }
}
</script>

<style scoped>

</style>